<template>
  <div class="steelList">
    <div class="itemList" v-if="steelList.length!=0">
      <div class="item" v-for="(item,index) of steelList" :key="index">
        <div class="left">
          <div class="item_name">
            <span>项目名称:</span>{{item.project_name||''}}
            <span v-if="item.status == 0" style="color: #878586;margin-left: 10px">({{item.status_name}})</span>
            <span v-if="item.status == 1" style="color: orange;margin-left: 10px">({{item.status_name}})</span>
            <span v-if="item.status == 2" style="color: green;margin-left: 10px">({{item.status_name}})</span>
          </div>
          <div class="item_num">
            <span>车牌号：</span>{{item.plate_num||''}}
          </div>
          <div class="item_count"><span>出厂支数：</span>{{item.original_pieces_num}}</div>
          <!-- <div class="item_aiCount"><span>识别数量：</span>{{item.last_num}}</div>
          <div class="item_aiCount"><span>误差数量：</span>{{item.diff_num}}</div> -->
          <div class="item_aiCount"><span>上传时间：</span>{{item.updated_at}}</div>
        </div>
        <div class="right_arrow">
          <div @click="del(item.id)">删除</div>
          <div @click="toProjectDetail(item)" >编辑</div> 
        </div>
      </div>
    </div>
    <div class="noContent" v-else>数据已加载完成...</div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      steelList:'',
      project_id:'',
      project:"",
      type:''//区分是否是草稿箱
    }
  },
  methods: {
    async getSteelList(){
     const userToken=wx.getStorageSync('userToken')
     const res=await this.$request.getData('/ucenter/getPointItem',{
        project_id:this.project_id,
        user_token:userToken,
        type:"draft_box"
      })
      if(res.data.level=='success'){
        this.steelList = res.data.data.point_items
        this.project   = res.data.data.project
      }
    },
    toProjectDetail(item){
      this.$currency.navigateTo(`/pages/countSteel/main?item=${item.id}&id=${item.project_id}`)
    },
    async del(id){
       const select=await this.$currency.showModal('是否删除点条项','')
          if(select){
            const userToken=wx.getStorageSync('userToken')
            const res=await this.$request.postData('/ucenter/deletePointItem',{
              point_item_id:id,
              user_token:userToken
            })
            if(res.data.level=='success'){
              this.$currency.showToast(res.data.message)
              setTimeout(()=>{
                this.getSteelList()
              },1500)
            }else{
              this.$currency.showToast(res.data.message)
            }
            
          }
    }
  },
  onLoad(options){
    this.getSteelList()
  }
}
</script>
<style lang="scss" scoped>
   .steelList{
    width: calc(100% - 40px);
    margin-left: 20px;
    font-size: 16px;
  }
  .itemList{
    padding-top:20px;
  }
  .item{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-bottom: 5px;
    border-bottom: 1px #eee solid;
  }
  .item>div{
    margin-bottom: 10px;
  }

  .item_name,.item_num,.item_count,.item_aiCount{
    margin-top:10px;
    margin-right: 20px;
  }
  .item_name>span:first-child,.item_num>span:first-child,.item_count>span:first-child,.item_aiCount>span:first-child{
    width: 120px;
    display:inline-block;
  }
  .right_arrow{
    width: 100%;
    display: flex;
    flex-direction:row-reverse;
    &>div{
      display: inline-block;
      background-color: #ff3366;
      color: #fff;
      border-radius: 7px;
      text-align: center;
      margin-right: 10px;
      padding:5px 10px;
    }
  }
  

  .noContent{
    width:100%;
    position: fixed;
    top:20%;
    left:0;
    text-align: center;
    font-size: 20px;
  }

   .btn{
     margin-top:20px;
     width: 100%;
     /*display: flex;*/
     align-items: center;
   }
   .btn>div{background-color: #38B4DB;color: #fff;border-radius: 7px;text-align: center;margin-right: 10px;padding:10px 7.5px;}
</style>
